<template>
  <div id="navBtn">
    <button @click="prev" class="turnPage">&lt;上一页</button>
    <button
      class="pageBtn"
      v-for="(item, index) in this.btnData.all[this.btnData.currentArr]"
      :key="index"
      :class="{
        currentBtn: index + 1 == page
      }"
      @click="updateIndex(index + 1)"
    >
      {{ item }}
    </button>
    <span id="ellipsis" v-if="!isLast">
     ...
    </span>
    <button @click="next" class="turnPage">下一页&gt;</button>
  </div>
</template>

<script>
import { Request } from "../until/request";
import { PagesBtns } from "../until/PagesBtns";
export default {
  props: ["btnData"],
  name: "NavBtn",

  data() {
    return {
      size: 4,
      Data: this.btnData
    };
  },
  computed: {
    //当前这组按钮第几个
    page: function() {
      // console.log(this.btnData.all[this.btnData.currentArr])
      //第三个
      if (this.btnData.currentPage % 3 == 0) {
        return 3;
      } else {
        //第一，第二个
        return this.btnData.currentPage % 3;
      }
    },
    //是否是最后一组按钮 用于判断'...'是否显示
    isLast: function(params) {
      //指向当前按钮组的下表=按钮分组的组数时
      return this.btnData.length - this.btnData.currentArr == 1;
    }
  },
  mounted() {},
  methods: {
    //点击页码按钮 更新currentPage
    updateIndex(index) {
      //获取点击时的当前页码
      this.btnData.currentPage = this.btnData.currentArr * 3 + index;
      //请求新页码数据
      this.$emit("request", this.btnData.currentPage);
    },
    //上一页
    prev() {
      //是否当前时第一页
      if (this.btnData.currentPage != 1) {
        //是否是每组的第一页
        if (this.btnData.currentPage % 3 == 1) {
          //currentArr下标会退1
          this.btnData.currentArr -= 1;
        }
        this.btnData.currentPage -= 1;
        console.log("第" + this.btnData.currentArr + "组");
        console.log("第" + this.btnData.currentPage + "页");
        console.log("一共" + this.btnData.totalPage + "页");
        // this.request(this.btnData.currentPage);
        this.$emit("request", this.btnData.currentPage);

        //;
      }
    },
    //下一页
    next() {
      //判断是否为最后一页 是则点击无效
      if (this.btnData.currentPage != this.btnData.totalPage) {
        // this.btnData.currentPage = parseInt(this.btnData.currentPage);

        console.log(this.btnData.currentPage);
        //是否是每一组按钮的最后一个
        if (this.btnData.currentPage % 3 == 0) {
          console.log("gg");
          //是则将currentArr（辅助下标，指向当前组按钮）自增
          this.btnData.currentArr++;

          // console.log(this.btnData);
        }
        //当前页码自增
        this.btnData.currentPage++;
        //请求新页码的数据
        this.$emit("request", this.btnData.currentPage);
      }
    }
  }
};
</script>

<style  scoped>
#navBtn {
  width: 66.7rem;
  height: 2rem;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: cyan; */
  color: rgb(102, 102, 153);
}
button {
  cursor: pointer;
}
.pageBtn,
#ellipsis {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.5rem;
  text-align: center;
  line-height: 1.5rem;
  background: transparent;
  color: rgb(102, 102, 153);
}
.pageBtn:hover,
.turnPage:hover {
  background: rgb(84, 86, 82);
  color: white;
}
.turnPage {
  width: 4rem;
  height: 1.5rem;
  background: transparent;
  color: rgb(102, 102, 153);
}
.currentBtn {
  background: rgb(84, 86, 82);
  color: white;
}
</style>